<template>
    <div class="block" v-if="isLoad">
        <el-row class="block-item">
            <exSelect v-model="qry.code"  :multiple="true" collapse-tags v-show="qryShow.code[type]" :dictList="codelist" label="代码" size="mini" elstyle="width:250px;" allow-create default-first-option></exSelect>
            <exDateRange v-model="qry.dateRange" v-show="qryShow.dateRange[type]" 
                :type="type=='month'?'monthrange':'daterange'" label="时间范围" size="mini" elstyle="width:200px" startDiff="-30"></exDateRange>
            <exRadioGroup v-model="qry.filterZero" v-show="qryShow.filterZero[type]" label="过滤" :dictList="filterList" size="mini" @change="onChangeType"></exRadioGroup>
            <exSwitch v-model="qry.groupByCode" v-show="qryShow.groupByCode[type]" label="区分个股" class="mt5"></exSwitch>
            <el-button type="primary" @click="query" size="mini" style="height:28px;margin-top:4px">查询</el-button>
            
            <exRadioGroup v-model="type" label="查询类型" :dictList="typeList" size="mini" @change="onChangeType"></exRadioGroup>
            <chartPop v-show="qryShow.chart[type]" size="large"  @setChartOption="setChartOption">图表</chartPop>
        </el-row>
        <el-row class="block-item mt10" v-show="type=='money'">
            <el-col :span="12">
                <money ref="moneyTable"></money>
            </el-col>
            <el-col :span="12">
                <today ref="todayTable"></today>
            </el-col>
        </el-row>
        <el-row class="block-item mt10" v-show="type=='money'">
            <store ref="storeTable" :qry="qry"></store>
        </el-row>
        <el-row class="block-item mt10" v-if="loadMap.sum" v-show="type=='sum'">
            <sum ref="sumTable"></sum>
        </el-row>
        <el-row class="block-item mt10" v-if="loadMap.month" v-show="type=='month'">
            <month ref="monthTable"></month>
        </el-row>
        <el-row class="block-item mt10" v-if="loadMap.day" v-show="type=='day'">
            <day ref="dayTable"></day>
        </el-row>
        <el-row class="block-item mt10" v-if="loadMap.detail" v-show="type=='detail'">
            <detail ref="detailTable" :qry="qry"></detail>
        </el-row>
        <el-row class="block-item mt10" v-if="loadMap.jj" v-show="type=='jj'">
            <jjInfo ref="jjTable" :qry="qry"></jjInfo>
        </el-row>
        <el-row class="block-item mt10" v-if="loadMap.bank" v-show="type=='bank'">
            <bank ref="bankTable" :qry="qry"></bank>
        </el-row>
    </div>
</template>



<script>
import Vue from "vue";
import money from "./hiscomp/money"
import today from "./hiscomp/today"
import store from "./hiscomp/store"
import sum from "./hiscomp/sum"
import detail from "./hiscomp/detail"
import bank from "./hiscomp/bank"
import month from "./hiscomp/month"
import day from "./hiscomp/day"
import jjInfo from "./hiscomp/jjInfo"

import chartPop from "@/components/chart/chartPopKLine"

export default {
    components:{
        money,
        today,
        store,
        sum,
        detail,
        bank,
        month,
        day,
        jjInfo,
        chartPop
    },
    data() {
        var that = this;
        return {
            isLoad: false,
            loadMap: {money:true,sum:false,detail:false,bank:false,month:false,day:false,jj:false},
            type:"money",
            typeList:[{"name":"资金",value:"money"},{"name":"汇总",value:"sum"},{"name":"按月汇总",value:"month"},{"name":"按天汇总",value:"day"},{"name":"明细",value:"detail"},{"name":"基金",value:"jj"},{"name":"银证",value:"bank"}],
            filterList:[{"name":"全部",value:""},{"name":"为0",value:"1"},{"name":"不为0",value:"2"}],
            qryShow:{
                code:{
                    money:true,
                    sum:false,
                    month:true,
                    day:true,
                    detail:true,
                    bank:false,
                },
                dateRange:{
                    money:true,
                    sum:false,
                    month:false,
                    day:true,
                    detail:true,
                    bank:false,
                    jj: true,
                },
                filterZero:{
                    money:false,
                    sum:false,
                    month:true,
                    day:true,
                    detail:false,
                    bank:false,
                },
                chart:{
                    money:false,
                    sum:false,
                    month:false,
                    day:true,
                    detail:false,
                    bank:false,
                },
                groupByCode:{
                    money:false,
                    sum:false,
                    month:true,
                    day:true,
                    detail:false,
                    bank:false,
                }
            },
            qry:{
                code:["300869"],
                dateRange: [],
                filterZero: "1",
                groupByCode: false,
            },
            cfg:[],
            codeList:[],
        }
    },
    computed:{
        codelist(){
            var list = [];
            if(this.codeList && this.codeList.length>0){
                this.codeList.map((item)=>{
                    list.push({name:item.name+"("+item.code+")",value:item.code})
                })
            }else{
                if(this.cfg.favList){
                    this.cfg.favList.map((item)=>{
                        list.push({name:item.n+"("+item.c+")",value:item.c})
                    })
                }
            }
            return list;
        }
    },
    provide () {
      return {
          getQueryInfo:()=>{
              return this.getQueryInfo();
          }
      }
    },

    mounted() {
        this.reLoad();
        this.getCodeList();
        // this.getSumInfo()
    },

    methods: {
        onChangeType(){
            this.loadMap[this.type] = true;
        },
        query(){
            if(this.type=="money"){
                if(this.$refs.moneyTable) this.$refs.moneyTable.reQuery();
                if(this.$refs.todayTable) this.$refs.todayTable.reQuery();
                if(this.$refs.storeTable) this.$refs.storeTable.reQuery();
            }else if(this.type=="sum"){
                if(this.$refs.sumTable) this.$refs.sumTable.reQuery();
            }else if(this.type=="month"){
                if(this.$refs.monthTable) this.$refs.monthTable.reQuery();
            }else if(this.type=="day"){
                if(this.$refs.dayTable) this.$refs.dayTable.reQuery();
            }else if(this.type=="detail"){
                if(this.$refs.detailTable) this.$refs.detailTable.reQuery();
            }else if(this.type=="jj"){
                if(this.$refs.jjTable) this.$refs.jjTable.reQuery();
            }else if(this.type=="bank"){
                if(this.$refs.bankTable) this.$refs.bankTable.reQuery();
            }
        },
        getQueryInfo(){
            var objInfo = {};
            if(this.qryShow.code[this.type] && this.qry.code.length>0){
                // objInfo.code = this.qry.code;
                var tmp=[];
                this.qry.code.map(item=>{
                    tmp.push("'"+item+"'");
                })
                objInfo.code = {in:tmp}
            }
            if(this.qryShow.dateRange[this.type] &&  this.qry.dateRange && this.qry.dateRange.length==2){
                var start = this.$dayjs(this.qry.dateRange[0]).format("YYYYMMDD");
                var end = this.$dayjs(this.qry.dateRange[1]).format("YYYYMMDD");
                objInfo.day = {egt:start,elt:end};
            }
            if(this.qryShow.filterZero[this.type] && this.qry.filterZero){
                objInfo.filterZero = this.qry.filterZero;
            }
            if(this.qryShow.groupByCode[this.type]){
                objInfo.groupByCode = this.qry.groupByCode;
            }
            return objInfo;
        },
        getCodeList(){
            var opername = "getCodeList";
            this.registerListen(this,opername,(res)=>{
                if(res.succ){
                    this.codeList = res.data;
                    this.codeList.sort((a,b)=>{
                        if(a.code=="300869") return -1;
                        if(b.code=="300869") return 1;
                        else return 0;
                    })
                }else{
                    this.$message.error("查询异常:"+res.err)
                }
            });
            
            var param = {type:opername,name:opername,objInfo:{}};
            electron.ipcRenderer.send("doSql",param)
        },
        reLoad(){
            var that = this;
            if(!window.electron){
                that.isLoad = true;
                return;
            }
            this.registerListen(this,"setConfig",(cfg)=>{
                try{
                    // console.info("loadCfg:" ,cfg)
                    Object.assign(that.cfg, cfg);
                    that.isLoad = true;
                }catch(ex){
                    that.$message.error("配置加载异常:"+ex.message)
                }
            });
            electron.ipcRenderer.send("getConfig","")

        },
        setChartOption(option){
            var prifitMap = null;
            if(this.$refs.dayTable) prifitMap=this.$refs.dayTable.getChartData();
            if(!prifitMap) return;
            option.grid=[
                {
                    left: '10%',
                    right: '8%',
                    height: '40%'
                },
                {
                    left: '10%',
                    right: '8%',
                    top: '53%',
                    height: '16%'
                },
                {
                    left: '10%',
                    right: '8%',
                    top: '73%',
                    height: '16%'
                }
            ];

            option.xAxis[2]={
                type: 'category',
                gridIndex: 2,
                data: option.xAxis[1].data,
                scale: true,
                // boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
            option.yAxis[1].name="成交量";
            option.yAxis[1].nameLocation="center";
            option.yAxis[3]={
                name:"盈亏",
                nameLocation:"center",
                scale: true,
                gridIndex: 2,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }

            var list = [];
            option.xAxis[1].data.map(item=>{
                var profit = prifitMap[item] || 0;
                profit = profit.toFixed(2)*1;
                list.push([item,profit]);
            })

            option.series.push({
                name: 'profit',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 3,
                data: list,
                itemStyle: {
                    normal: {
        　　　　　　　　//这里是重点
                        color: function(params) {
                            if(params.data[1]>0){
                                return '#ec0000'
                            }
                            return '#00da3c'
                        }
                    }
                },
            })

        }
    }
    
}
</script>
